<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = "http://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <%@include file="/page/view/common/head.jsp" %>
    <link rel="stylesheet" href="<%=path%>plugins/fakeloader/fakeLoader.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <div class="modal fade" id="modal-default" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="box box-default">
                    <div class="box-header">
                        <h3 class="box-title"></h3>
                    </div>
                    <div class="box-body">

                    </div>
                    <div class="overlay">
                        <i class="fa fa-refresh fa-spin"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-add" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">新增二维码</h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label for="bonus" class="col-sm-2 control-label">积分</label>

                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="bonus" placeholder="积分">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="amount" class="col-sm-2 control-label">数量</label>

                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="amount" placeholder="数量">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="do_add">生成</button>
                </div>
            </div>
        </div>
    </div>
    <div class="content-wrapper" style="margin-left: 0px;">
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">搜索条件</h3>
                        </div>
                        <form class="form-horizontal">

                            <div class="box-body">
                                <div>
                                    <div class="form-group col-sm-4">
                                        <label for="value" class="col-sm-3 control-label">兑换码</label>

                                        <div class="col-sm-9">
                                            <input type="text" class="form-control search-input" id="value"
                                                   placeholder="兑换码">
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <label for="phone" class="col-sm-3 control-label">手机号</label>

                                        <div class="col-sm-9">
                                            <input type="text" class="form-control search-input" id="phone"
                                                   placeholder="手机号">
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <label for="batch" class="col-sm-3 control-label">批次</label>

                                        <div class="col-sm-9">
                                            <input type="text" class="form-control search-input" id="batch"
                                                   placeholder="批次">
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <label for="status" class="col-sm-3 control-label">使用状态</label>
                                        <div class="col-sm-9">
                                            <select class="form-control search-select" id="status">
                                                <option value="0">请选择</option>
                                                <c:forEach items="${options}" var="item">
                                                    <option value="${item.get("value")}">${item.get("name")}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                    <div style="display: none;">
                                        <input type="text" class="search-input" id="createDate_start_hidden">
                                        <input type="text" class="search-input" id="createDate_end_hidden">
                                        <input type="text" class="search-input" id="useDate_start_hidden">
                                        <input type="text" class="search-input" id="useDate_end_hidden">
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <label for="createDate" class="col-sm-3 control-label">创建时间</label>

                                        <div class="col-sm-9">
                                            <input type="text" class="form-control search-input" id="createDate"
                                                   placeholder="创建时间">
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <label for="useDate" class="col-sm-3 control-label">使用时间</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control search-input" id="useDate"
                                                   placeholder="使用时间">
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="box-footer">
                                <button type="button" class="btn btn-success pull-left" id="btn_addModal">新增</button>
                                <button type="button" class="btn btn-primary pull-right" id="do_search">搜索</button>
                                <button type="button" class="btn btn-warning pull-right" id="clear_input">清空</button>
                            </div>
                        </form>
                    </div>
                    <div class="box col-xs-3">
                        <div class="box-header">
                            <h3 class="box-title">兑换码列表</h3>
                        </div>
                        <div class="box-body">

                            <table id="example1" class="table table-bordered table-striped">

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<%@include file="/page/view/common/footer.jsp" %>
</body>
<script src="<%=path%>bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="<%=path%>bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script>
    $(function () {
            var deleteQrCode = function (id) {
                var params = {
                    "id": id

                }
                $("#modal-default").modal("show");
                $.ajax({
                    "type": "POST",
                    // "contentType": "application/json; charset=UTF-8",
                    "url": "<%=path%>qrcode/delete",
                    "dataType": "json",
                    "data": params, //以json格式传递
                    "success": function (resp) {
                        $("#modal-default").modal("hide");
                    }
                });
            }
            $("#example1").on("click", ".data-delete", function () {
                    var params = {
                        "id": $(this).attr("data-toggle")

                    }
                    $("#modal-default").modal("show");
                    $.ajax({
                        "type": "POST",
                        // "contentType": "application/json; charset=UTF-8",
                        "url": "<%=path%>qrcode/delete",
                        "dataType": "json",
                        "data": params, //以json格式传递
                        "success": function (resp) {
                            table.ajax.reload();
                            $("#modal-default").modal("hide");

                        }
                    })
                }
            ).on("click", ".data-disabled", function () {
                    var params = {
                        "id": $(this).attr("data-toggle"),
                        "status": 3

                    }
                    $("#modal-default").modal("show");
                    $.ajax({
                        "type": "POST",
                        // "contentType": "application/json; charset=UTF-8",
                        "url": "<%=path%>qrcode/update",
                        "dataType": "json",
                        "data": params, //以json格式传递
                        "success": function (resp) {
                            table.ajax.reload();
                            $("#modal-default").modal("hide");

                        }
                    })
                }
            ).on("click", ".data-enable", function () {
                var params = {
                    "id": $(this).attr("data-toggle"),
                    "status": 1

                }
                $("#modal-default").modal("show");
                $.ajax({
                    "type": "POST",
                    // "contentType": "application/json; charset=UTF-8",
                    "url": "<%=path%>qrcode/update",
                    "dataType": "json",
                    "data": params, //以json格式传递
                    "success": function (resp) {
                        table.ajax.reload();
                        $("#modal-default").modal("hide");

                    }
                });
            })
        }
    );
    $('#createDate').daterangepicker({
        "autoUpdateInput": false
    }, function (start, end, label) {
        $("#createDate").val(start.format('YYYY-MM-DD') + "&&" + end.format('YYYY-MM-DD'));
        $("#createDate_start_hidden").val(start.format('YYYY-MM-DD'));
        $("#createDate_end_hidden").val(end.format('YYYY-MM-DD'));
    });
    $('#useDate').daterangepicker({
        "autoUpdateInput": false
    }, function (start, end, label) {
        $("#useDate").val(start.format('YYYY-MM-DD') + "&&" + end.format('YYYY-MM-DD'));
        $("#useDate_start_hidden").val(start.format('YYYY-MM-DD'));
        $("#useDate_end_hidden").val(end.format('YYYY-MM-DD'));
    });
    $("#clear_input").click(function () {
        $(".search-input").val("");
        $(".search-select").val("0");
    });

    $("#do_search").click(function () {
        table.ajax.reload();
    });
    $("#do_add").click(function () {
        var params = {
            "bonus": $("#bonus").val(),
            "amount": $("#amount").val(),
        }
        $.ajax({
            "type": "POST",
            // "contentType": "application/json; charset=UTF-8",
            "url": "<%=path%>qrcode/add",
            "dataType": "json",
            "data": params, //以json格式传递
            "success": function (resp) {
                $("#modal-add").modal("hide");
            }
        });

    });
    $("#btn_addModal").click(function () {
        $("#modal-add").modal("show");
    });
    var table = $('#example1').on("preXhr.dt", function (e, setting, processing) {
        // $("#progress").addClass("show");
        $("#modal-default").modal("show");
    }).on("xhr.dt", function (e, settings, json, xhr) {
        // $("#progress").addClass("hide");
        $("#modal-default").modal("hide");
    }).DataTable({
        ordering: false,
        bServerSide: true,
        sAjaxSource: "<%=path%>qrcode/list",
        fnServerData: retrieveData,
        autoWidth: false,
        pageLength: 10,
        lengthChange: false,
        searching: false,
        processing: false,
        bFilter: false,
        scrollX: true,
        // pagingType: "input",
        language: {
            "sProcessing": "加载中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        columns: [
            // {
            // "data": "userId",
            // "title": "用户ID",
            // // "":""
            // },
            {
                "data": "batch",
                "title": "批次",
            },
            {
                "data": "value",
                "title": "兑换码",
            },
            {
                "data": "bonus",
                "title": "积分",
            },
            {
                "data": "status",
                "title": "状态",
                "render": function (data, type, full, meta) {
                    var res = '<span class="label label-danger> 未知 </span>';
                    if (data == 1) {
                        res = '<span class="label label-primary"> 待使用 </span>';
                    } else if (data == 2) {
                        res = ' <span class="label label-warning"> 已使用 </span>';
                    } else if (data == 3) {
                        res = ' <span class="label label-danger"> 禁用 </span>';
                    }
                    return res;
                }
            },
            {
                "data": "phone",
                "title": "使用者",
                "render": function (data, type, full, meta) {
                    if (data == null) {
                        return "";
                    }
                    return data;
                }
            },
            {
                "data": "createTime",
                "title": "创建时间",
                "render": function (data, type, full, meta) {
                    if (data == null) {
                        return "";
                    }
                    var myDate = new Date(data);
                    return myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate();
                }
            },
            {
                "data": "useTime",
                "title": "使用时间",
                "render": function (data, type, full, meta) {
                    if (data == null) {
                        return "";
                    }
                    var myDate = new Date(data);
                    return myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate();
                }
            },
            {
                "data": "ps",
                "title": "备注",
                "render": function (data, type, full, meta) {
                    if (data == null || data == undefined) {
                        data = "";
                    }
                    return data;
                }
            },
            {
                "data": "id",
                "title": "操作",
                "render": function (data, type, full, meta) {
                    var res = '<div>';
                    if (full["status"] == 1) {
                        res += '<button class="btn btn-warning btn-sm data-disabled" data-toggle="' + data + '"><i class="fa
                        fa - info - circle
                        fa - fw
                        "></i>禁用</button>';
                    } else if (full["status"] == 3) {
                        res += '<button class="btn btn-primary btn-sm data-enable"data-toggle="' + data + '"><i class="fa fa-edit
                        fa - fw
                        "></i>启用</button>';
                    }
                    res += '<button class="btn btn-danger btn-sm data-delete" data-toggle="' + data + '"><i class="fa fa-trash-o
                    fa - fw
                    "></i>删除</button>';
                    res += '</div>';
                    return res;
                }
            }
        ]
    });

    function retrieveData(sSource, aoData, fnCallback) {
        var params = {
            "value": $("#value").val(),
            "status": $("#status").val(),
            "phone": $("#phone").val(),
            "displayStart": aoData[3]["value"],
            "displayLength": aoData[4]["value"]
        };
        if (!($("#useDate_start_hidden").val() == "" || $("#useDate_start_hidden").val() == undefined)) {
            params["useDateStart"] = $("#useDate_start_hidden").val();
        }
        if (!($("#useDate_end_hidden").val() == "" || $("#useDate_end_hidden").val() == undefined)) {
            params["useDateEnd"] = $("#useDate_end_hidden").val();
        }
        if (!($("#createDate_start_hidden").val() == "" || $("#createDate_start_hidden").val() == undefined)) {
            params["createDateStart"] = $("#createDate_start_hidden").val();
        }
        if (!($("#createDate_end_hidden").val() == "" || $("#createDate_end_hidden").val() == undefined)) {
            params["createDateEnd"] = $("#createDate_end_hidden").val();
        }
        $.ajax({
            "type": "GET",
            "contentType": "application/json; charset=UTF-8",
            "url": sSource,
            "dataType": "json",
            "data": params, //以json格式传递
            "success": function (resp) {
                var data = {};
                // data["iTotalRecords"] = resp["data"]["list"].length;
                data["iTotalDisplayRecords"] = resp["data"]["totalAmount"];
                // data["iTotalRecords"] = resp["data"]["totalAmount"];
                // data["iTotalDisplayRecords"] = resp["data"]["list"].length;
                data["aaData"] = resp["data"]["list"];
                // data["sEcho"] = 10;
                fnCallback(data); //服务器端返回的对象的returnObject部分是要求的格式

            }
        });
    }
</script>
</html>



